<template>
	<view class="address-edit-page">
		<hs-status-bar type="capsule"></hs-status-bar>
		<top-bar :title="title" direction="left" :haveBack="true"></top-bar>
		<view class="content">
			<view class="form">
				<view class="title">
					<text class="t1">地址信息</text>
					<label class="default" @click="setDefault">
						<radio :checked="editData.defaultAddress" style="transform:scale(0.7)" />
						<text>默认收货地址</text>
					</label>

				</view>
				<label for="" class="item">
					<text class="label">收件人</text>
					<input type="text" v-model="editData.receiverName" class="input" placeholder="收件人名字"
						maxlength="25" />
				</label>
				<label for="" class="item">
					<text class="label">手机号</text>
					<input type="number" v-model="editData.receiverPhone" class="input" maxlength="11"
						placeholder="收件人手机号" />
				</label>
				<label for="" class="item">
					<text class="label">所在地区</text>
					<hs-select-adress @selectAreas="selectAreas"
						:defaultAreas="{province:editData.province,city:editData.city,area:editData.area}"></hs-select-adress>
				</label>
				<label for="" class="item">
					<text class="label">详细地址</text>
					<textarea name="" id="" cols="30" rows="10" maxlength="120" v-model="editData.addressLine"
						placeholder="收件人详细地址" class="input textarea"></textarea>
				</label>
			</view>
		</view>
		<view class="under-btn">
			<view class="btn" @click="deleteAdress" v-if="isEdit">
				删除
			</view>
			<view class="btn" @click="saveAdress(1)" v-if="isEdit">
				保存
			</view>
			<view class="btn" @click="saveAdress(2)" v-if="!isEdit">
				保存并使用
			</view>
		</view>
	</view>
</template>

<script>
	import {
		regions,
		countryCode
	} from '@/static/js/staticData.js'
	import {
		setDefaultAddress,
		createAddress,
		updateAddress,
		deleteAddress
	} from '@/api/product.js'
	import {
		mapActions,
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				editData: {},
				title: "添加收货地址",
				multiIndex: ['', '', ''],
				isEdit: false,
				intoType: 1,
			}
		},
		computed: {
			...mapGetters(['addressList'])
		},
		methods: {
			...mapActions(['getAddressList']),
			// 选择地区
			selectAreas(data) {
				this.editData.province = data.province
				this.editData.city = data.city
				this.editData.area = data.area
			},
			// 设置默认地址
			setDefault() {
				this.editData.defaultAddress = !this.editData.defaultAddress
			},
			// 保存地址
			saveAdress(delta) {
				if (!this.checkAdress()) return
				let post = null
				if (this.editData.id) {
					post = updateAddress
				} else {
					post = createAddress
				}
				post(this.editData).then(res => {
					this.getAddressList().then(() => {
						uni.setStorageSync('orderAdress', this.editData.id ? this.editData : res.data)
						if (this.intoType == 2) {
							// 从订单页添加第一条地址跳转编辑页，保存并使用
							uni.navigateBack({
								delta: 1
							})
						} else if (this.intoType == 1 && delta == 2) {
							// 从地址列表页跳转编辑页，保存并使用
							uni.navigateBack({
								delta: 2
							})
						} else {
							// 从地址列表页跳转编辑页，保存
							uni.navigateBack()
						}
					})
				})
			},
			// 删除地址
			deleteAdress() {
				deleteAddress({
					id: this.editData.id
				}).then(res => {
					// 如果删除的地址是正在用的地址，清除
					let _id = uni.getStorageSync('orderAdress')
					if (this.editData.id == _id.id) {
						uni.removeStorageSync('orderAdress')
					}
					this.getAddressList()
					uni.navigateBack()
				})
			},
			// 校验地址
			checkAdress() {
				let msg = ''
				if (!this.editData.receiverName || this.editData.receiverName == '') {
					msg = '请填写正确的收件人'
				} else if (!this.editData.receiverPhone || this.editData.receiverPhone == '' || this.editData.receiverPhone
					.length != 11) {
					msg = '请填写正确的手机号'
				} else if (!this.editData.province || !this.editData.city || !this.editData.area || this.editData
					.province == '' || this.editData.city ==
					'' || this.editData.area ==
					'') {
					msg = '请选择正确的地区'
				} else if (!this.editData.addressLine || this.editData.addressLine == '') {
					msg = '请填写详细地址'
				}
				if (msg) {
					uni.showToast({
						icon: 'none',
						title: msg,
					});
				}
				return msg == '' ? true : false
			}
		},
		onShow(e) {
			this.editData = uni.getStorageSync('editAddress')
			if (this.editData && this.editData.id) {
				this.title = "编辑收货地址"
				this.isEdit = true
			} else {
				this.title = "添加收货地址"
				this.isEdit = false
				this.editData = {
					defaultAddress: false,
					province: '',
					city: ''
				}
			}
			this.multiIndex = [this.editData.province, this.editData.city, '']
		},
		onLoad(e) {
			// 进入的类型
			this.intoType = e.intoType
		},
		onUnload() {
			uni.removeStorageSync('editAddress')
		}
	}
</script>

<style lang="scss">
	.address-edit-page {
		display: flex;
		flex-direction: column;
		height: 100%;

		.content {
			flex-grow: 1;
			margin-top: 20rpx;
			padding: 0 30rpx;

			.form {
				background: #fff;
				border-radius: 26rpx;
				padding: 30rpx 21rpx;
				display: flex;
				flex-direction: column;

				.title {
					display: flex;
					justify-content: space-between;
					margin-bottom: 13rpx;

					.t1 {
						font-size: 35rpx;
					}

					.default {
						font-size: 26rpx;
					}
				}

				.item {
					display: flex;

					.picker {
						flex: 1;
					}

					.input {
						height: 74rpx;
						background-color: #F6F6F6;
						border-radius: 26rpx;
						padding: 0 35rpx;
						flex: 1;
						margin: 15rpx 0 0 15rpx;
						line-height: 74rpx;

						&.textarea {
							height: 187rpx;
							line-height: 1.5;
							padding: 23rpx 35rpx;
							box-sizing: border-box;
						}
					}

					.label {
						line-height: 74rpx;
						width: 105rpx;
					}
				}
			}
		}

		.under-btn {
			height: 100rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-evenly;
			margin: 10rpx 0;

			.btn {
				height: 75rpx;
				background: #333;
				color: #fff;
				border-radius: 17rpx;
				text-align: center;
				line-height: 75rpx;
				padding: 0 21rpx;
				flex: 1;
				margin: 0 30rpx;
			}
		}
	}
</style>